import _ from 'lodash'
import panel from "./panel.vue";
const RISK_LEVELS = ["1级", "2级", "3级", "4级"];
const RISK_LEVELS_NAMES = ["一级风险", "二级风险", "三级风险", "四级风险"];

const source = {
  collectionName: "security_risk_corporate",
  options: { include: ["gridId"], exists: "gridId", limit: 2000 }
}

const layer = {
  source: ["grid", "risk"],
  mergeSource(obj) {
    let { grid, risk } = obj;
    grid = grid.map(item => {
      let children = risk.filter(v => {
        let gridPath = v.gridId
          ? [].concat(v.gridId.attributes.paths, v.gridId.id)
          : [];
        return gridPath.indexOf(item.id) > -1;
      });
      if (children.length) {
        item.risk = {
          source: children,
          level: _.groupBy(children, "level")
        };
      }
      return { ...item };
    });
    return { grid, risk };
  },
  infoWindow: {
    component: panel,
    title: "name"
  },
  marker: {
    layout: "echarts",
    areaCenterCoordinate: "points",
    zoom: "zoomRange",
    echartOption(prop) {
      let level = prop.risk && prop.risk.level
      if (!level) return null
      let data = []
      data = RISK_LEVELS.map((item, index) => {
        let num = level[item] ? level[item].length : 0
        return {
          value: num,
          name: RISK_LEVELS_NAMES[index]
        }
      })
      return {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "center",
            z: 2,
            style: {
              text: prop.risk.source.length,
              font: '1.2em "STHeiti", sans-serif',
              fill: "#fff",
              textAlign: "center",
              textVerticalAlign: "middle"
            }
          }
        ],
        series: [
          {
            name: "企业风险",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: data,
            color: ["#FF0000", "#FFA500", "#FFFF00", "#0000FF"]
          }
        ]
      };
    }
  }
}

export default {
  sources: { risk: source },
  layers: { risk: layer }
}
